<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PetStore UOC - Practical Case</title>
</h:head>

<h:body>
 <div id="layout">
	<div id="top" class="top">
		<ui:insert name="top">
			<table width="100%" cellspacing="0" border="0"
			  background="#{resource['images:bkg-topbar.gif']}">
			  <tr>
			    <td width="26"><img border="0" src="#{resource['images:petstore.gif']}"/></td>  
			  </tr>
			</table>
			<f:view>
			<table width="100%">
			<tr><td width="50%" align="left">
			 <h:form>
			  <p align="right">
	  			<h:panelGrid columns="4"> 			
	  				<h:outputText value="Select category pets:  "/>
					<h:selectOneMenu valueChangeListener="#{pets.categoryValueChanged}" value="#{pets.category}" immediate="true" >
			 			<f:selectItems value="#{catalog.categoryList}" />        
			 		</h:selectOneMenu>
			  		<h:commandButton value="Confirm" immediate="true" action="#{pets.listPets}" />
					<h:commandButton image="#{resource['images:home.png']}" action ="homeView.xhtml" immediate="true"/>
				</h:panelGrid>	
			  </p>
			 </h:form>
			 </td>
			 <td width="50%" align="right">
				<ui:include src="./loginView.xhtml">
				</ui:include>
			 </td></tr>
			 </table>			
			</f:view>
		</ui:insert>
	</div>	
	<div id="content">
		<ui:insert name="content">Content</ui:insert>
	</div>
 </div>
</h:body>
</html>
